<script lang="ts" setup>
import { ref, unref } from 'vue'
import { useI18n } from '@/locales/useI18n'
import { GetList_GetListResponse } from '@/types/modules/HotelConfig'
import { TableAction } from '@/components/TableList'


import { useResponse } from '@/hooks/web/useResponse'
import {
  headerActionsConfigData,
  columnOperateConfigData,
  ActionsEnum
} from './tableData'
import TableGrid from './table.vue'
import * as api from '@/api/modules/HotelConfig'

const { t } = useI18n()

const tableInstance = ref()

const actionsRelateFn = {
  [ActionsEnum.add]: () => {},
  [ActionsEnum.edit]: () => {},
  [ActionsEnum.detail]: () => {},
  [ActionsEnum.delete]: () => {}
}
</script>
<template>
  <div class="page-wrapper page-wrapper-p20">
    <a-space direction="vertical" :size="20" style="width: 100%">
      <a-card>
        <table-grid ref="tableInstance">
          <template #toolbar v-if="headerActionsConfigData.length">
            <table-action
              :space="8"
              :data="headerActionsConfigData"
              @handler="type => actionsRelateFn[type]()"
            />
          </template>
          <template #operate="row" v-if="columnOperateConfigData.length">
            <table-action
              :divider="true"
              :data="columnOperateConfigData"
              @handler="type => actionsRelateFn[type](row)"
            />
          </template>
        </table-grid>
      </a-card>
    </a-space>
  </div>
</template>
